<script setup>
import TalkRecord from '@/components/TalkRecord.vue'
import ChatInput from '@/components/ChatInput.vue'
import ChatBox from '@/components/ChatBox.vue'
import ChatBanner from '@/components/ChatBanner.vue'
import { onMounted, ref } from 'vue'

// 引入ai store控制组件的显示
import { useAIStore } from '@/stores/modules/ai.js'
const aiStore = useAIStore()

// 定义一个标志位用于触发 TalkRecord 刷新
const refreshFlag = ref(false)
// 定义一个标志位用于触发 chatBox 刷新
const refreshChatBoxFlag = ref(false)

// 处理 ChatInput 触发的刷新事件
const handleRefreshTalkRecord = () => {
  // 切换 refreshFlag 来触发 TalkRecord 的刷新
  refreshFlag.value = !refreshFlag.value
}

const handleRefreshChatBox = () => {
  // 切换 refreshChatBoxFlag 来触发 chatBox 的刷新
  refreshChatBoxFlag.value = !refreshChatBoxFlag.value
}
</script>

<template lang="html">
  <!-- 对话记录组件 -->
  <TalkRecord :key="refreshFlag" @refresh="handleRefreshChatBox" ></TalkRecord>

  <div class="body">
    <!-- 展示区 -->
    <ChatBanner v-if="aiStore.aiChatBoxSwitch"></ChatBanner>

    <!--  聊天气泡  -->
    <ChatBox v-else :key="refreshChatBoxFlag"></ChatBox>

    <!-- 输入框 -->
    <ChatInput @refresh-talk-record="handleRefreshTalkRecord"></ChatInput>
  </div>
</template>
<style scoped lang="scss">
.body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
</style>
